<template>
  <div>
    <h2>
      {{mag}}
    </h2>
    <h3>
      {{$store.state.count}}
    </h3>
  <button @click="$store.commit('add')">+</button>
  <button @click="$store.commit('reduce')">-</button>
  </div>

</template>
<script>
import store from "./store";
import mapAction from 'vuex'
export default {
  data() {
    return {
      msg: "hello vuex"
    };
  },
  computed:
    // mapState({
    //   count:state=>state.count,
    //   countalias:'count',
    //   // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    //   countLocalstate(state) {
    //     return state.count + this.localCount;
    //   }
    // })
    {
      ...mapState({
        localCount: store => state.count
      }),
      ...mapActions([
        'add',
        'addBy'
      ]),
      ...mapActions({
        add:'add'
      })
    }
};
</script>

